<template>
  <div class="pie" id="pie1"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Pie',
  props: {
    data: {
      type: Array,
      default: () => {
        return [

        ];
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const chartDom = document.getElementById('pie1');
      const myChart = echarts.init(chartDom);
      const sum = this.data.reduce((acc, cur) => {
        return acc + Number(cur.value);
      }, 0);
      const option = {
        tooltip: {
          trigger: 'item'
        },
        grid: {
          top: '5%'
        },
        legend: {
          right: '10%',
          orient: 'vertical',
          icon: 'circle',
          top: 'middle',
          // width: 600,
          formatter: (name) => {
            const data = this.data.find(e => e.name == name);
            const arr = [
              `{a|${name}}`,
              `{b|${data.value}}`,
              `{c|件}`,
              `{d|${((data.value / sum).toFixed(4) * 100).toFixed(2)}%}`
            ];
            return arr.join(' ');
          },
          itemGap: 20,
          // itemWidth: 200,
          textStyle: {
            width: 200,
            rich: {
              a: {
                fontSize: 18,
                color: '#999'
              },
              b: {
                fontSize: 20,
                color: '#999'
              },
              c: {
                fontSize: 18,
                color: '#999'
              },
              d: {
                fontSize: 20,
                color: '#999',
                padding: [0, 0, 0, 20]
              }
            }
          }
        },
        series: [
          {
            name: '不同等级事件占比',
            type: 'pie',
            radius: ['60%', '75%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 10
            },
            right: '50%',
            // height: '90%',
            label: {
              position: 'center',
              formatter: () => {
                const arr = [
                  `{a|${sum}}`,
                  `{b|事件总数(件)}`
                ];
                return arr.join('\n');
              },
              rich: {
                a: {
                  fontSize: 42,
                  color: '#4071FB'
                },
                b: {
                  fontSize: 20,
                  color: '#666',
                  padding: [12, 0, 0, 0]
                }
              }
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '40',
            //     fontWeight: 'bold',
            //   }
            // },
            labelLine: {
              show: false
            },
            data: this.data
          }
        ]
      };

      option && myChart.setOption(option);
    });
  }
};
</script>

<style scoped>
  .pie {
    height: inherit;
  }
</style>
